


//轮播图 方法二
var person = [{ url: "../img/i5.jpg" }, { url: "../img/i6.webp" },
{ url: "../img/i7.webp" }, { url: "../img/i8.webp" }, { url: "../img/i9.webp" }, { url: "../img/i10.webp" }]
const img = document.querySelector(".banner-home img")
const next = document.querySelector(".slide-button-next")
var i = 0
next.addEventListener("click", function () {
    //console.log(11);
    i++
    i = i >= person.length ? 0 : i
    // console.log(person[i]);
    img.src = person[i].url
    document.querySelector(".slide-pagination .active").classList.remove("active")
    document.querySelector(`.slide-pagination li:nth-child(${i + 1})`).classList.add("active")

})
const prev = document.querySelector(".slide-button-prev")
prev.addEventListener("click", function () {
    //console.log(11);
    i--
    i = i < 0 ? person.length - 1 : i
    // console.log(person[i]);
    img.src = person[i].url
    document.querySelector(".slide-pagination .active").classList.remove("active")//移除原来的类名
    document.querySelector(`.slide-pagination li:nth-child(${i + 1})`).classList.add("active")
    // 当前li 添加这个类名
})


//自动轮播定时器、移入移出效果
var a;
function autoPlay() {
    a = setInterval(function () {
        next.click()
    }, 5000)
}
autoPlay()
//鼠标移入移出
banner_box = document.querySelector(".banner-box")
banner_box.onmouseover = function () {
    console.log("onmouseover")
    clearInterval(a)
}
banner_box.onmouseout = function () {
    console.log("onmouseout", a)
    autoPlay()
}


//注册声明    
//点击注册,显示声明
var dialog = document.querySelector(".mi-popup")
var display_dialog = document.querySelector(".click_dialog")
display_dialog.onclick = function () {
    dialog.style.display = "block"
}

//点击叉号关闭声明
var dialog_close = document.querySelector(".mi-dialog_header_btn")
dialog_close.onclick = function () {
    dialog.style.display = "none"
}
//不同意点击关闭声明
var dialog_btn = document.querySelector(".btn-disaggree")
dialog_btn.onclick = function () {
    dialog.style.display = "none"
}
//同意点击跳转到新的html页面
var aggree_btn = document.querySelector(".btn-aggree")
aggree_btn.onclick = function () {
    window.location.href = "day18登录注册.html"
}
//登录链接跳转新的html页面
var Login_html = document.querySelector(".Login")
Login_html.onclick = function () {
    window.location.href = "day18登录注册.html"
}

var cureent_img_index = 0;
setInterval(function () {
    var imgels = document.querySelectorAll("[id^='sites-links-active-img-']");
    imgels[cureent_img_index].classList.add("maxlay");

    var sibels = getAllSiblings(imgels[cureent_img_index])
    for (var j = 0; j < sibels.length; j++) {
        sibels[j].classList.remove("maxlay");
    }
    cureent_img_index++;
    if (cureent_img_index >= document.querySelectorAll("[id^='sites-links-active-img-']").length) {
        cureent_img_index = 0
    }
}, 1000)

//选择页面上所有需要切换效果的文字
var els = document.querySelectorAll("[id^='more-']")
els = Array.from(els)
//由于页面元素规律的问题（切换文字和显示商品的元素规律都是以指定的字符开头，所以需要过滤掉切换文字之外的元素）
els = els.filter(function (el) {
    return !el.getAttribute("id").endsWith("-div")
})

for (var i = 0; i < els.length; i++) {
    els[i].onmouseover = function () {
        flushSibs(this)
        var eid = this.getAttribute("id")
        document.querySelector("#" + eid + "-div").classList.add("maxlay");
    }
    els[i].onmouseout = function () {
        flushSibs(this)
    }
}

//还缺一个清楚切换效果的方法

//清除所有兄弟元素的图层显示效果
function flushSibs(el) {
    var eid = el.getAttribute("id")
    var changel = document.querySelector("#" + eid + "-div");
    var sibels = getAllSiblings(changel)
    for (var j = 0; j < sibels.length; j++) {
        sibels[j].classList.remove("maxlay");
    }
}

//获取当前元素的所有兄弟元素
function getAllSiblings(element) {
    var siblings = Array.from(element.parentNode.children);
    siblings = siblings.filter(function (sibling) {
        return sibling !== element;
    });
    return siblings;
}